<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小莱书城</title>
    <link rel="stylesheet" href="css/three.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <p><img src="img/images_three/logo.png" alt="logo"></p>
            <ul>
                <li><a href="#" onclick="isShowlogin()">登录</a> |</li>
                <li><a href="#">注册</a> |</li>
                <li><a href="#">关于</a> </li>
            </ul>
        </div>

    </div>
    <!-- 主体 -->
    <div class="main">
        <div class="a1">
            <h4>全部书籍</h4>
            <h3>移动互联网开发专业书籍</h3>
            <p>Web标准网站设计之道</p>
            <p>Photoshop商业网站设计</p>
            <h3>移动互联网应用专业书籍</h3>
            <p>计算机基础应用</p>
            <p>Linux系统管理</p>
        </div>
        <div class="a2">
            <img src="img/images_three/banner01.png" alt="轮播图">
        </div>
        <div class="a3">
            <div class="a">
                <img src="img/images_three/1.png" alt="">
                <div class="b">
                    <h3>移动互联网开发全套书籍</h3>
                    <p>高端专业独享教材,突破传统教与学,合理利用碎片化学习时间。</p>
                    <p><a href="子网页.html">立即购买</a></p>
                </div>
            </div>
            <div class="aa">
                <img src="img/images_three/2.png" alt="">
                <div class="b">
                    <h3>移动互联网开发全套书籍</h3>
                    <p>高端专业独享教材,突破传统教与学,合理利用碎片化学习时间。</p>
                    <p><a href="子网页.html">立即购买</a></p>
                </div>
            </div>
            <div class="aaa">
                <img src="img/images_three/3.png" alt="">
                <div class="b">
                    <h3>移动互联网开发全套书籍</h3>
                    <p>高端专业独享教材,突破传统教与学,合理利用碎片化学习时间。</p>
                    <p><a href="子网页.html">立即购买</a></p>
                </div>
            </div>
            <div class="aaaa">
                <img src="img/images_three/4.png" alt="">
                <div class="b">
                    <h3>移动互联网开发全套书籍</h3>
                    <p>高端专业独享教材,突破传统教与学,合理利用碎片化学习时间。</p>
                    <p><a href="小莱书城详情页.html">立即购买</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>Copyright © 2017 武汉格莱科技 保留公司所有权利。</p>
    </div>

    <!-- 模态框 -->
    <div class="mask">
        <div class="modal">
            <h2>登录</h2>
            <div class="user-info">
                <div class="from-ctrl">
                    <label for="username">用户名：</label>
                    <input type="text" name="" id="username" placeholder="张林坤">
                </div>
                <div class="from-ctrl">
                    <label for="password">密码：</label>
                    <input type="text" name="" id="password">
                </div>
            </div>
            <div class="bth-group">
                <button>注册</button>
                <button>登录</button>
            </div>

            <span class="close">&times;</span>
        </div>
    </div>


    <script>
        function isShowlogin(){
            let mask = document.querySelector('.mask')
            let close = document.querySelector('.close')
            let modal = document.querySelector('.modal')

            mask.style.visibility='visible'
            modal.style.transform='translateY(0px)'

            close.onclick=function(){
                modal.style.transform='translateY(-760px)'
                mask.style.visibility='hidden'

            }

           
        }
    </script>
</body>

</html>